<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!--htmlhead 在 layout.html 中定义了 th:fragment="htmlhead(title,cssPaths)" 参数 可以动态引入css-->

<title>resume登陆</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./css/login.css" media="all"/>

</head>
<style>

    body {
        background-image: url(./img/01.jpg);
    }

    /* 覆盖原框架样式 */
    .layui-elem-quote {
        background-color: inherit !important;
    }

    .layui-input, .layui-select, .layui-textarea {
        background-color: inherit;
        padding-left: 30px;
    }
</style>
<body>

<!-- LoginForm -->
<div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend>欢迎登陆 - resume管理系统</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <form class="layui-form zyl_pad_01" action="">
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="text" name="userName" lay-verify="required|userName" autocomplete="off"
                           placeholder="账号" class="layui-input">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码"
                           class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md12">
                <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="loginSubmit">立即登录</button>
            </div>
        </form>
    </div>
</div>
<!-- LoginForm End -->


<!-- Jquery Js -->
<script type="text/javascript" src="./layui/jquery-3.5.1.min.js"></script>
<!-- Layui Js -->
<script type="text/javascript" src="./layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length = 0) {
                    return '账号不能为空';
                }
            },
            //,pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
            password: function (value) {
                if (value.length == 0) {
                    return '密码不能为空';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(loginSubmit)', function (data) {
            //进行登陆操作
            $.ajax({
                type: 'post',
                url:'login',
                contentType:'application/json',
                data:JSON.stringify(data.field),
                dataType:'json',
                success:function (data) {
                    if(data.code == 200){
                        window.location.href="index";
                    }else{
                        layer.msg('账号或密码错误', {time: 5000, icon: 5});
                        return false;
                    }
                },
                error:function (data) {
                    layer.msg('登陆异常', {time: 5000, icon: 5});
                }
            })
            return false;
        });
    });

</script>


</body>
</html>